<template>
    <div id="classroomsit" style="width: 1500px; height: 400px; display: flex; "></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
    mounted() {
      var chartDom = document.getElementById('classroomsit');
      var myChart = echarts.init(chartDom);
      var option;
  
      const floors = ['1F', '2F', '3F', '4F', '5F']; // 纵轴分别为1-5层
const hours = ['A楼', 'B楼', 'C楼', 'D楼', 'E楼', 'F楼', '图书馆', '钱江湾空间', '学生活动中心', '文科实验楼','信息楼','现教中心']; // 十个小时
const data = [
  [0, 0, 200], [0, 1, 400], [0, 2, 600], [0, 3, 800], [0, 4, 1000], [0, 5, 1200], [0, 6, 1400], [0, 7, 1600], [0, 8, 1800], [0, 9, 2000],[0, 10, 1200], [0, 11, 1400],
  [1, 0, 400], [1, 1, 600], [1, 2, 800], [1, 3, 1000], [1, 4, 1200], [1, 5, 1400], [1, 6, 1600], [1, 7, 1800], [1, 8, 2000], [1, 9, 200],[1, 10, 1400], [1, 11, 1600], 
  [2, 0, 600], [2, 1, 800], [2, 2, 1000], [2, 3, 1200], [2, 4, 1400], [2, 5, 1600], [2, 6, 1800], [2, 7, 2000], [2, 8, 200], [2, 9, 400],[2, 10, 1600], [2, 11, 1800],
  [3, 0, 800], [3, 1, 1000], [3, 2, 1200], [3, 3, 1400], [3, 4, 1600], [3, 5, 1800], [3, 6, 2000], [3, 7, 200], [3, 8, 400], [3, 9, 600],[3, 10, 1800], [3, 11, 2000], 
  [4, 0, 1000], [4, 1, 1200], [4, 2, 1400], [4, 3, 1600], [4, 4, 1800], [4, 5, 2000], [4, 6, 200], [4, 7, 400], [4, 8, 600], [4, 9, 800], [4, 10, 2000], [4, 11, 200]
].map(function (item) {
  return [item[1], item[0], item[2] || '-'];
});
var isFiltered1 = false;
var isFiltered2 = false;
      option = {

        toolbox: {
    feature: {
      myButton1: {
        show: true,
        title: '自习',
        icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 800c-176.8 0-320-143.2-320-320s143.2-320 320-320 320 143.2 320 320-143.2 320-320 320z',
        onclick: function () {
          // 处理自习按钮点击事件
          // 修改数据显示逻辑
          if (isFiltered1) {
            option.series[0].data = data; // 显示全部数据
            isFiltered1 = false; // 更新显示状态
          } else {
            option.series[0].data = data.filter(item => item[0] < 10); // 仅保留横轴为A-E楼的数据
            isFiltered1 = true; // 更新显示状态
          }
          myChart.setOption(option);
        }
      },
      myButton2: {
        show: true,
        title: '机房',
        icon: 'path://M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 800c-176.8 0-320-143.2-320-320s143.2-320 320-320 320 143.2 320 320-143.2 320-320 320z',
        onclick: function () {
          // 处理机房按钮点击事件
          // 修改数据显示逻辑
          if (isFiltered2) {
            option.series[0].data = data; // 显示全部数据
            isFiltered2 = false; // 更新显示状态
          } else {
            option.series[0].data = data.filter(item => item[0] >= 10); // 仅保留横轴为A-E楼的数据
            isFiltered2 = true; // 更新显示状态
          }
          myChart.setOption(option);
        }
      }
    }
  },
        tooltip: {
          position: 'top'
        },
        title: {
    text: '教室资源情况',
    left: 'center',
    top: 0,
    textStyle: {
        fontSize: 30,
        color:'#415058'
    }
},
        grid: {
          left:'10%',
          height: '50%',
          top: '10%'
        },
        xAxis: {

          type: 'category',
          data: hours,
          splitArea: {
            show: true
          },
          axisLabel: {
      color: '#791C00',
    }
        },
        yAxis: {
          type: 'category',
          data: floors, // 纵轴分别为1-5层
          splitArea: {
            show: true
          },
          axisLabel: {
      color: '#791C00',
    }
        },
        visualMap: {
          min: 0,
          max: 2000,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '15%'
        },
        series: [
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: data,
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
  
      option && myChart.setOption(option);
    },
  };
  </script>